<template>
    <div id="home">
       <div v-if="!showLoading">
           <Header/>
           <!--传递数据给子组件--轮播图-->
           <Sowing :sowing_list="sowing_list"/>
           <!--中部导航-->
           <Nav :nav_list="nav_list"/>
           <!--秒杀-->
           <FlashSale :flash_sale_product_list="flash_sale_product_list"/>
           <!--猜你喜欢-->
           <YouLike :you_like_product_list="you_like_product_list"/>
           <MarkPage v-if="showBackStatus" :scrollToTop = "scrollToTop"/>
       </div>
        <van-loading
                v-else
                type="spinner"
                size="24px"
                color="#1989fa"
                style="position: absolute;left: 50%;top:40%;transform: translate(-50%)"
        >
            小撩正在拼命加载中...</van-loading>

    </div>
</template>

<script>
//1.引入
import { getHomeData } from './../../service/api/index'
//2.引入组件
import Header from './components/header/Header'
import Sowing from './components/sowing/Sowing'
import Nav from './components/nav/Nav'
import FlashSale from './components/flashSale/FlashSale'
import YouLike from './components/youLike/YouLike'
import MarkPage from './components/markPage/MarkPage'

//3.引入处理返回顶部的函数
import { showBack, animate } from '../../config/global'

//4.引入通知组件
import PubSub from 'pubsub-js'
import { Toast } from 'vant'

//5.引入vuex
import {mapMutations} from 'vuex'

export default {
  name: 'Home',
  data(){
    return {
      //轮播图数据
      sowing_list: [],
      //导航的数据
      nav_list: [],
      //限时抢购的数据
      flash_sale_product_list: [],
      //猜你喜欢的数据
      you_like_product_list: [],
      //是否显示加载图标
      showLoading: true,
      //显示隐藏滚动图标
      showBackStatus: false
    }
  },
  created () {
    //2.请求网络数据
    this.reqData();
  },
  mounted(){
    // 订阅消息（添加到购物车的消息）
    PubSub.subscribe('homeAddToCart', (msg, goods)=>{
      if(msg === 'homeAddToCart'){
        this.ADD_GOODS({
          goodsId: goods.id,
          goodsName: goods.name,
          goodsImage: goods.small_image,
          goodsPrice: goods.price
        });
        //提示用户
        Toast({
          message: '添加到购物车成功',
          duration: 800
        });
      }
    });
  },
  components:{
    Header,
    Sowing,
    Nav,
    FlashSale,
    YouLike,
    MarkPage
  },
  methods:{
    ...mapMutations(['ADD_GOODS']),
    async reqData(){
      //转换为同步
      let res = await getHomeData();
      // console.log(res);
      if(!res.succeed){
        this.sowing_list = res.data.list[0].icon_list;
        this.nav_list = res.data.list[2].icon_list;
        this.flash_sale_product_list = res.data.list[3].product_list;
        this.you_like_product_list = res.data.list[12].product_list;
        //隐藏加载动画
        this.showLoading  = false;
        //开始监听滚动
        showBack((status)=>{
          this.showBackStatus = status;
        })
      }
    },
    scrollToTop(){
      //处理动画返回顶部
      let docB = document.documentElement || document.body;
      animate(docB, {scrollTop: '0'}, 400, 'ease-out');
    }
  },
}
</script>

<style lang="less" scoped>
    #home{
        width: 100%;
        height: 300rem;
    }
</style>
